<template>
	<view class="main">
		<!-- 标题 -->
<!-- 		<view class="title">
			<text>避雷黑中介排行榜</text>
		</view> -->

		<!-- 主体 -->
		<view class="container">
			<view v-for="(item,index) in rankingList" :key="item.id">
				<view class="card">
					<view class="header">
						<view class="name">{{item.communityName}}</view>
						<view class="rank">♥ {{item.comNum}}</view>
					</view>
					<view class="divider"></view>
					<!-- <view class="detail">{{detailsComput(item.details)}}</view> -->
					<view class="bottom">
						<view class="avaters">
							<view class="grouptxt">
								<u--text type="primary" text="贡献者:" size="20"></u--text>
							</view>
							<view class="group">
								<u-avatar-group :urls="item.avatars" size="35" maxCount=10 gap="0.1"></u-avatar-group>
							</view>
						</view>
						<view class="lossMoney">
							<view class="lossTxt">
								<u--text type="primary" text="损失金额:" size="20"></u--text>
							</view>
							<view class="number">
								<u-count-to :startVal="0" :endVal="item.lossMoneyTotal" separator="," fontSize=30 
									color="#ff0000"></u-count-to>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getHotHzjRank
	} from '@/api/room/room.js'

	export default {
		data() {
			return {
				// 排行榜数据
				rankingList: []
			}
		},
		onLoad(options) {
			getHotHzjRank().then(response => {
				console.log("response:", response)
				if (response.code == 200) {
					this.rankingList = response.data
					for (var i = 0; i < this.rankingList.length; i++) {
						this.rankingList[i].id = i
					}
				}
				console.log("rankingList:", this.rankingList)
			})
		},
		computed: {
			detailsComput() {
				return function(details) {
					let res = ""
					if (details == null || details.length == 0) {
						return res
					}
					for (var i = 0; i < details.length; i++) {
						res += details[i] + ";"
					}
					return res
				}
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		background-color: #dddddd;

		// 标题
		.title {
			height: 30px;
			line-height: 30px;
			padding: 10px 0;
			font-size: 18px;
			font-weight: bolder;
			background-color: #dddddd;
			text-align: center;
			// border-bottom: 2px solid #807a7a;
		}

		// 主体
		.container {
			padding: 10px;
			display: flex;
			flex-direction: column;
			background-color: #ddd;
			color: #000000;

			.card {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 90px;
				padding: 0 10px;
				margin: 10px 0;
				border-radius: 8px;
				background-color: #ffffff;

				.header {
					height: 25px;
					line-height: 25px;
					font-weight: bolder;
					display: flex;
					justify-content: space-between;
				}

				.divider {
					height: 1px;
					background-color: #5f5b5b63;
				}

				.detail {
					font-size: 14px;
					font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
				}

				.bottom {
					display: flex;
					
					.avaters {
						display: flex;
						width: 70%;

						.grouptxt {					
							width: 100rpx;
							display: flex;
						}
					}

					.lossMoney {
						width: 30%;
						display: flex;
						justify-content: flex-end;
						.lossTxt {
							display: flex;
						}

						.number {
							display: flex;
						}
					}
				}

			}
		}
	}
</style>